import React, { memo } from 'react';
import { InfoCircleOutlined } from '@ant-design/icons';
import { Row, Col, Tooltip } from 'antd';
import numeral from 'numeral';
import { ChartCard } from '@/components/Charts';
import Trend from '@/components/Trend';

const topColResponsiveProps = {
  xs: 24,
  sm: 12,
  md: 12,
  lg: 12,
  xl: 6,
};

const TotalNum = memo(({ loading, custNum, empNum }) => (
  <Row gutter={12}>
    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        title="客户总量"
        action={
          <Tooltip
            title={
              <div>
                <p>客户总量：查询截止到昨晚24:00当前用户的业务客户数量；</p>
                <p>当月新增：创建时间为当前月的客户；</p>
                <p>当月减少：当前月被删除的客户;</p>
              </div>
            }
            overlayStyle={{ minWidth: 260 }}
          >
            <InfoCircleOutlined />
          </Tooltip>
        }
        loading={loading}
        total={numeral(custNum.staNum).format('0,0')}
        footer={
          <span>
            当月增减
            <Trend flag="up" style={{ marginLeft: 20, color: 'rgba(0,0,0,.85)' }}>
              {numeral(custNum.addNum).format('0,0')}
            </Trend>
            <Trend flag="down" style={{ marginLeft: 16, color: 'rgba(0,0,0,.85)' }}>
              {numeral(custNum.delNum).format('0,0')}
            </Trend>
          </span>
        }
        contentHeight={46}
      />
    </Col>
    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        title="服务人数总量"
        action={
          <Tooltip
            title={
              <div>
                <p>服务人数总量：查询截止到昨晚24:00当前用户的在职员工+入职办理中员工；</p>
                <p>当月新增：当月添加的入职增员数量；</p>
                <p>当月减少：当月操作的离职减员数量；</p>
              </div>
            }
            overlayStyle={{ minWidth: 260 }}
          >
            <InfoCircleOutlined />
          </Tooltip>
        }
        loading={loading}
        total={numeral(empNum.staNum).format('0,0')}
        footer={
          <span>
            当月增减
            <Trend flag="up" style={{ marginLeft: 20, color: 'rgba(0,0,0,.85)' }}>
              {numeral(empNum.addNum).format('0,0')}
            </Trend>
            <Trend flag="down" style={{ marginLeft: 16, color: 'rgba(0,0,0,.85)' }}>
              {numeral(empNum.delNum).format('0,0')}
            </Trend>
          </span>
        }
        contentHeight={46}
      />
    </Col>
  </Row>
));

export default TotalNum;
